<template>
    <el-row type="flex" justify="space-between" style="align-items:center;height:100%">
      <el-row type="flex"
        style="text-align: left;align-items:center;padding-left: 0px;"
      >
      <el-row inline-block style="font-size: 30px;line-height:1.3;align-items:center;vertical-align:middle;">
         <el-icon 
          @click="collapse"><Fold /></el-icon>
          <h3>{{title}}</h3>
      </el-row>
       
      </el-row>

      <el-row type="flex" style="text-align: right;align-items:center">
        
        <el-avatar  :src="img" style="margin-right: 30px"></el-avatar>
        <el-dropdown
          trigger="click"
          style="font-size: 20px;"
        >
          <el-row class="el-dropdown-link" style="vertical-align:middle;">
            <p>
               {{username}}
            </p> 
            <el-icon><ArrowRight /></el-icon>
          </el-row>
          <template #dropdown>
          <el-dropdown-menu >
            <el-dropdown-item @click="exit">退出登录</el-dropdown-item>
          </el-dropdown-menu>
          </template>
       
        </el-dropdown>
      </el-row>
    </el-row>

</template>

<script>
import img from "@/assets/touxiang.jpg";
export default {
  props:['title','username'],
  data(){
    return{
        img: img,
        title1:this.title,
        isCollapse:false
    }
  },
  methods:{
    collapse(){
      if(this.isCollapse)
        this.isCollapse=false
      else
        this.isCollapse=true
      this.$emit('postcollapse',this.isCollapse)
    },
    exit(){
      this.$confirm('退出登录','您确定要退出登录吗?').then(()=>{
        window.sessionStorage.removeItem("userInfo");
        window.sessionStorage.removeItem('token');
      this.$router.push({
        path:"/"
      })
      }).catch(()=>{
        this.$message.info('取消操作')
      })
    }
  },
  created(){
    // 发送axios请求，获取真数据
  },
  mounted(){
    // 通过ref获取组件实例，操作dom元素
  }
  
};
</script>

<style scoped>
.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  font-size: 22px;
  background: #242f42;
  color: #fff;
}

.collapse-btn {
  float: left;
  padding: 0 21px;
  cursor: pointer;
  line-height: 70px;
}

.header .logo {
  float: left;
  width: 250px;
  line-height: 70px;
}

.header-right {
  float: right;
  padding-right: 50px;
}

.header-user-con {
  display: flex;
  height: 70px;
  align-items: center;
}

.btn-fullscreen {
  transform: rotate(45deg);
  margin-right: 5px;
  font-size: 24px;
}

.btn-bell,
.btn-fullscreen {
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
}

.btn-bell-badge {
  position: absolute;
  right: 0;
  top: -2px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #f56c6c;
  color: #fff;
}

.btn-bell .el-icon-bell {
  color: #fff;
}

.user-name {
  margin-left: 10px;
}

.user-avator {
  margin-left: 20px;
  transition: 0.5s;
}

.user-avator:hover {
  transform: rotate(360deg);
}

.user-avator img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.el-dropdown-link {
  color: black;
  cursor: pointer;
  margin-left: 5px;
}

.el-dropdown-menu__item {
  text-align: center;
}
</style>


